<template>
  <div>
    <h4>搜索条件</h4>
    <el-form>
      <el-form-item>
        <el-row>
          <el-col :span="8">
            <el-input disabled value="资源类别"></el-input>
          </el-col>
          <el-col :offset="1" :span="9">
            <el-input
              disabled
              v-model="resourceTypeInfo.resourceTypeTitle"
            ></el-input>
          </el-col>
          <el-col v-if="selectedFieldList.length == 0" :offset="1" :span="2">
            <el-button @click.prevent="addQueryField">
              <i class="el-icon-plus"></i>
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item
        v-for="(fieldInfo, index) in selectedFieldList"
        :key="index"
      >
        <el-row>
          <el-col :span="8">
            <el-select
              v-model="fieldInfo.fieldName"
              @change="selectedFieldChange(fieldInfo.fieldName, index)"
              placeholder="请选择搜索条件字段"
              :disabled="fieldInfo.isDisabled"
            >
              <el-option
                v-for="(field, waitSelectedIndex) in waitSelectedFieldList"
                :key="waitSelectedIndex"
                :value="field.fieldName"
                :label="field.fieldTitle"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :offset="1" :span="9">
            <!-- <el-input v-model="fieldInfo.fieldValue"></el-input> -->
            <el-input
              v-show="fieldInfo.inputVisible"
              v-model="fieldInfo.fieldValue"
              placeholder="请输入搜索值"
            ></el-input>
            <el-select
              v-show="!fieldInfo.inputVisible"
              filterable
              v-model="fieldInfo.fieldValue"
              placeholder="请选择搜索条件"
            >
              <el-option
                v-for="enumItem in fieldInfo.enumItemList"
                :key="enumItem.key"
                :value="enumItem.key"
                :label="enumItem.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col
            v-if="index == selectedFieldList.length - 1"
            :offset="1"
            :span="2"
          >
            <el-button @click.prevent="addQueryField">
              <i class="el-icon-plus"></i>
            </el-button>
          </el-col>
          <el-col :offset="1" :span="2">
            <el-button @click.prevent="removeField(fieldInfo, index)">
              <i class="el-icon-close"></i>
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item>
        <el-row>
          <el-col :span="24">
            <div style="width: 30%; margin: 0 auto">
              <el-button type="success" @click="queryEntity">提交</el-button>
              <el-button @click="resetForm('queryData')">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import * as EnumApi from "@/api/enum";
  import * as UserApi from "@/api/user";
  import * as ResourceTypeApi from "@/api/resourceType";
  import * as ResourceTypeFieldApi from "@/api/resourceTypeField";
  import * as ResourceTypeEntityApi from "@/api/resourceTypeEntity";
  import * as ResourceTypeEntityDataApi from "@/api/resourceTypeEntityData";
  import * as GroupResourceApi from "@/api/groupResource";
  import { usingStatus, constantFieldList } from "@/config/settings";

  export default {
    data() {
      return {
        // 资源类别信息
        resourceTypeInfo: {},

        // 用户列表
        userList: [],

        // 选中的字段数据列表---要传入后端接口的数据
        selectedFieldList: [
          {
            fieldName: "",
            fieldValue: "",
            inputVisible: true,
            isDisabled: false,
          },
        ],

        // 待选项字段列表
        waitSelectedFieldList: [],
      };
    },

    props: ["resourceTypeName"],

    methods: {
      // 移除条件字段
      removeField(fieldInfo, index) {
        this.selectedFieldList.splice(index, 1);
      },

      // 选中的字段改变
      selectedFieldChange(val, index) {
        this.waitSelectedFieldList.forEach((fieldInfo) => {
          if (val === fieldInfo.fieldName) {
            this.selectedFieldList[index] = fieldInfo;
            this.$set(
              this.selectedFieldList[index],
              "dynamics",
              fieldInfo.isDynamics
            );
            this.$set(this.selectedFieldList[index], "fieldValue", "");
            if (fieldInfo.fieldType === "enum") {
              this.$set(this.selectedFieldList[index], "inputVisible", false);
            } else {
              this.$set(this.selectedFieldList[index], "inputVisible", true);
            }
          }
        });
        this.selectedFieldList[index].isDisabled = true;
      },

      // 添加查找条件
      addQueryField() {
        this.selectedFieldList.push({
          fieldName: "",
          fieldValue: "",
          inputVisible: true,
          isDisabled: false,
        });
      },

      // 重置选中数据
      resetForm(formName) {
        this.selectedFieldList.splice(0);
        let param = {
          resourceTypeName: this.resourceTypeName,
          queryEntityDtoList: this.selectedFieldList,
          currentPage: 1,
        };
        this.$emit("query-entity-list", param);
      },

      // 查询实体
      queryEntity() {
        let valid = true;
        this.selectedFieldList.forEach((fieldInfo) => {
          if (fieldInfo.fieldName == "" || fieldInfo.fieldValue == "") {
            this.$notify.warning({
              title: "警告",
              message: "搜索条件的键和值不能为空",
              offset: 100,
            });
            valid = false;
            return;
          }
        });
        if (!valid) {
          return;
        }
        let param = {
          resourceTypeName: this.resourceTypeName,
          queryEntityDtoList: this.selectedFieldList,
          currentPage: 1,
        };
        this.$emit("query-entity-list", param, valid);
        // ResourceTypeEntityApi.queryResourceEntityPageList(param).then((res) => {
        //   this.$emit("query-entity-list", res.data, param);
        // });
      },

      // 通过资源类别英文名获取资源类别信息
      getResourceTypeInfo() {
        ResourceTypeApi.getResourceTypeByName(this.resourceTypeName).then(
          (res) => {
            this.resourceTypeInfo = res.data;
          }
        );
      },

      // 通过资源类别英文名获取动态字段
      getDynamicsFieldByReaourceTypeName() {
        ResourceTypeFieldApi.getResourceTypeFieldByName(
          this.resourceTypeName
        ).then((res) => {
          this.dynaicsFieldList = res.data;
          this.setWaitSelectedFieldList();
        });
      },

      // 设置搜索字段待选项列表
      setWaitSelectedFieldList() {
        this.waitSelectedFieldList = JSON.parse(
          JSON.stringify(constantFieldList)
        );
        this.waitSelectedFieldList[2].enumItemList = usingStatus;
        this.waitSelectedFieldList[3].enumItemList = this.userList;
        this.waitSelectedFieldList[4].enumItemList = this.userList;
        this.waitSelectedFieldList[5].enumItemList = this.userList;
        this.waitSelectedFieldList[6].enumItemList = [
          { key: true, value: "是" },
          { key: false, value: "否" },
        ];
        this.dynaicsFieldList.forEach((eachField) => {
          let enumItemList = [];
          if (eachField.resourceTypeFieldType === "enum") {
            EnumApi.getEnumItemByGroupName(eachField.enumGroupName).then(
              (res) => {
                res.data.forEach((enumItem) => {
                  enumItemList.push({
                    key: enumItem.enumItemKey,
                    value: enumItem.enumItemValue,
                  });
                });
              }
            );
          }
          this.waitSelectedFieldList.push({
            fieldName: eachField.resourceTypeFieldName,
            fieldTitle: eachField.resourceTypeFieldTitle,
            fieldType: eachField.resourceTypeFieldType,
            enumGroupName: eachField.enumGroupName,
            enumItemList: enumItemList,
            isDynamics: true,
            tableName: "resource_type_field",
          });
        });
      },

      // 获取用户列表
      getUserList() {
        UserApi.getUserList().then((res) => {
          res.data.forEach((user) => {
            this.userList.push({
              key: user.username,
              value: user.realName,
            });
          });
        });
      },
    },

    mounted() {
      this.getDynamicsFieldByReaourceTypeName();
      this.getResourceTypeInfo();
      this.getUserList();
    },
  };
</script>
